import React from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import BookingFormModel from "@/components/models/bookingFormModel";

const Header = ({ data }) => {
   
    const whatsappNumber = data?.driver_whatsapp_number;
    const formattedNumber = whatsappNumber.replace(/[\s-+]/g, '');
    const whatsappLink = `https://wa.me/${formattedNumber}`;

    
    const router = useRouter();
    const [activeLink, setActiveLink] = React.useState("");
    const [isSticky, setIsSticky] = React.useState(false);
    const [showForm, setShowForm] = React.useState(false);

    const handleOpenModel = () => {
        setShowForm(true);
    };

    const handleCloseModel = () => {
        setShowForm(false);
    };


    React.useEffect(() => {
        setActiveLink(router.pathname);
        //console.log("pathname",router.pathname)
    }, [router.pathname]);


    React.useEffect(() => {
        const handleScroll = () => {
            if (window.scrollY > 0) {
                setIsSticky(true);
            } else {
                setIsSticky(false);
            }
        };
        window.addEventListener('scroll', handleScroll);
        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    }, []);

    return (
        <>
            <div>
                <section className="top-header">
                    <div className="container">
                        <div className="row">
                            <div className="col-12">
                                <div className="top-col-1">
                                    <div className="col-auto iconss">
                                        <p><i className="fas fa-map-marker-alt"></i> {data?.user.transporters[0].address} </p>
                                    </div>
                                    <div className="col-auto iconss">
                                        <p><i className="fas fa-phone-alt"></i> (+91){data?.user.phone_number}</p>
                                    </div>
                                    <div className="col-auto iconss">
                                        <p><i className="fas fa-envelope"></i> {data?.user.email} </p>
                                    </div>
                                    <div className="col">

                                        <div className="top-icon">
                                            {(data?.facebook_url) ?
                                                <Link href={data?.facebook_url}><i className="fab fa-facebook-f"></i ></Link>
                                                : null
                                            }
                                            {(data?.driver_whatsapp_number) ?
                                                <Link href={whatsappLink}><i className="fab fa-whatsapp"></i ></Link>
                                                : null
                                            }
                                            {(data?.twitter_url) ?
                                                <Link href={data?.twitter_url}><i className="fab fa-twitter"></i></Link >
                                                : null
                                            }
                                            {(data?.instagram_url) ?
                                                <Link href={data?.instagram_url}><i className="fab fa-instagram"></i></Link >
                                                : null
                                            }
                                            {(data?.linkedin_url) ?
                                                <Link href={data?.linkedin_url}><i className="fab fa-linkedin-in"></i></Link >
                                                : null
                                            }
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <header className={`header ${isSticky ? 'navbar-fixed' : ''}`}>
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-12 col-md-12 col-sm-12 col-12">
                                <nav className="navbar navbar-expand-lg">
                                    <a className="navbar-brand" href="#">
                                        <img src={data?.logo} alt="" height="50" /> {data?.website_name}
                                    </a>
                                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#navbarCollapse" aria-controls="navbarCollapse"
                                        aria-expanded="false" aria-label="Toggle navigation">
                                        <span className="fas fa-bars"></span>
                                    </button>
                                    <div className="collapse navbar-collapse" id="navbarCollapse">
                                        <ul className="navbar-nav">
                                            <li><Link className={activeLink == "/" ? "nav-item nav-link active" : "nav-item nav-link"} href="/">Home</Link></li>
                                            <li><Link className={activeLink == "/#about_me" ? "nav-item nav-link active" : "nav-item nav-link"} href="#about_me">About</Link></li>
                                            <li><Link className={activeLink == "/#our_services" ? "nav-item nav-link active" : "nav-item nav-link"} href="#our_services">Services</Link></li>

                                        </ul>
                                    </div>
                                    <div className="phone-number d-lg-none d-block">
                                        <p style={{ color: "#f7c033" }}>
                                            <a style={{ color: "#f7c033" }} href="tel:(+91)9825476243" className="btn-phone-icon">
                                                <i className="fas fa-phone-alt ripple"></i>
                                            </a> Call Me
                                            <a href="tel:(+91)9825476243" style={{ color: "#1b1b1b", textDecoration: "none" }}>
                                                (+91){data?.user.phone_number}
                                            </a>
                                        </p>
                                    </div>
                                    <div className="phone-number d-lg-block d-none">
                                        <p style={{ color: "#f7c033" }}>
                                            <a style={{ color: "#f7c033" }} href="tel:(+91)9825476243" className="btn-phone-icon">
                                                <i className="fas fa-phone-alt ripple"></i>
                                            </a> Call Me

                                            <a href="tel:(+91)9825476243" style={{ color: "#1b1b1b", textDecoration: "none" }}>
                                                (+91){data?.user.phone_number}
                                            </a>
                                        </p>
                                    </div>
                                    <div className="buttons d-lg-block d-none">
                                        <a className="btn btn-sm style-skew" onClick={handleOpenModel}>
                                            <span>Book Taxi</span>
                                        </a>
                                    </div>
                                </nav>
                            </div>
                        </div>
                    </div>
                </header>
            </div>
            {showForm && (
                <>
                    <div className="modal-backdrop fade show"></div>
                    <BookingFormModel onClose={handleCloseModel} vehicleData={data.user.transporters[0].vehicle} />
                </>
            )}
        </>
    );
};

export default Header;